import React, { Component } from 'react';
import '../styles/Zixunjiaoshi.scss'
import { NavBar, Space } from 'antd-mobile'
import { SearchOutline, MoreOutline} from 'antd-mobile-icons'
import * as service from '../api/index'
import tu from '../aseas/3913.png'

class Zixunjiaoshi extends Component {
    constructor(props) {
        super(props)
        this.state = {
          right: (
            <div style={{ fontSize: 24 }}>
              <Space style={{ '--gap': '16px' }}>
                <SearchOutline />
                <MoreOutline />
              </Space>
            </div>
          ),
          tu,
          jiaoshixx:[]
        }
      }
      async componentDidMount(){
        var res=await service.user_jiaoshixx()
        this.setState({jiaoshixx:res.data})
       }
    render() {
        return (
            <div className='zixunjiaoshi'>
                 <NavBar  right={this.state.right} onBack={()=>{this.props.history.go(-1)}}>
                 咨询教师
                </NavBar>
               <div className='tu'>
                   <img src={tu} alt="" />
               </div>
                <div className="nei">
                  {
                    this.state.jiaoshixx.map((item,index)=>{
                      return (
                        <div className='item' key={index}>
                          <div className="han">
                            <div className="left">
                              <img src={item.pic} alt="" />
                            </div>
                            <div className="right">
                              <div className='name'>{item.name}</div>
                              <div className='ling'>{item.ling}</div>
                            </div>
                          </div>
                          <div className="ke">{item.ke}</div>
                          <div className="text">{item.text}</div>
                          <div className="zi">立即咨询</div>
                        </div>
                      )
                    })
                  }
                </div>
            </div>
        );
    }
}

export default Zixunjiaoshi;